<template>
	<view class="barCont">
		<view @click="barFn(item)" :class="item.path===currentPath?'barItem barActive':'barItem'" :key="index" v-for="(item,index) in barArr">
			<view :class="'iconfont '+item.icon"></view>
			<view>{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabBar",
		data() {
			return {
				barArr:[
					{name:'就业',icon:'icon-gangwei',path:'pages/index/index'},
					{name:'船员',icon:'icon-chuanyuanzhaopin',path:'pages/boot/boot'},
					// {name:'培训',icon:'icon-jiaoyupeixun',path:'pages/train/train'},
					// {name:'办证',icon:'icon-message',path:'pages/obtain/obtain'},
					{name:'我的',icon:'icon-user',path:'pages/user/user'},
				],
				currentPath:'',
			};
		},
		methods:{
			barFn(item){
				uni.redirectTo({
					url: '/'+item.path
				});
			}
		},
		created() {
			this.currentPath = getCurrentPages().pop().route
		}
	}
</script>

<style lang="less">
.barCont{
	width: 100%;
	display: flex;
	justify-content: space-between;
	position: fixed;
	background-color: #fff;
	padding: 10rpx;
	bottom: 0;
	left: 0;
	.barItem{
		width: 34%;
		text-align: center;
		color: #515151;
		font-size: 24rpx;
		.iconfont{
			font-size: 40rpx;
			margin-bottom: 10rpx;
		}
	}
	.barActive{
		color: #3f55cc;
	}
}
</style>